<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <!-- <ul>
        <li>
            <p>id:1</p>
            <p>username: atguigu</p>
            <p>pwd:dsjfaksldjf</p>
        </li>
        <li>
            <p>id:2</p>
            <p>username: yuonly</p>
            <p>pwd:sdfsfad</p>
        </li>
        <li>
            <p>id:3</p>
            <p>username: houhou</p>
            <p>pwd:2142134</p>
        </li>
    </ul> -->
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    
    {
        // 1. {} 可以将数组中的每一个元素，都遍历出来直接渲染
        root.render([1,2,3,4])
        // 2. 插值表达式渲染的数组，数组中的元素可以是react元素
        root.render([<div>1</div>, <div>2</div>, <div>3</div>])
    }
    {
        // 3. 将普通数组，转化为react元素的数组，然后渲染
        let data = [1,2,3,4]  // ===> [react1, react2, react3]

        // 3-1. for循环转化
        // let vdomArr = []
        // for(let i = 0; i < data.length; i++){
        //     let item = data[i];
        //     vdomArr.push(<div>{item}</div>)
        // }
        // console.log('vdomArr: ',vdomArr)

        // 3-2. forEach

        // const vdomArr = []
        // data.forEach(item=>{
        //     vdomArr.push(<div>{item}</div>)
        // })

        // 3-3. map [渲染列表推荐]  map映射   map方法会返回一个跟原数组长度相同的一个新数组
        data = [1,2,3,4]
        // const vdomArr = data.map(item=>{
        //     // 1. item   1
        //     // 2. item   2
        //     // 3. .....
        //     return <div>{item}</div>

        //     // 1. return  <div>1</div>
        //     // 2. return  <div>2</div>
        //     // 3. ....
        // })

        // 箭头函数如果函数体只有一句，并且还是返回值，那么直接写()
        // const vdomArr = data.map(item=> (<div>{item}</div>))
        // map 箭头函数如果用了大括号，必须有return
        // const vdomArr2 = data.map(item=>{return <div>{item}</div>})


        // 遍历列表本质，就是将一个数据的数组，转化成一个react元素的数组，进行遍历
        // root.render(
        //     data.map(item=>(<div>{item}</div>))
        // )

        // 4. 关于控制台报的 key的错误，解决方案
        /**
         * 使用map对数据进行遍历，需要给每一个遍历元素的标签增加属性 key
         *  1. id：[推荐]
         *  2. index:[部分情况可用]
         */
              
       
        // 5. 使用map渲染元素是对象的数组

        let users = [
            {
                id:1,
                name:'古井',
                age:19
            },
            {
                id:2,
                name:'韩大威',
                age:30
            },
            {
                id:3,
                name:'李晶',
                age:23
            }
        ]

        root.render((
            <ul>
                {users.map((user,index)=>(
                    <li key={index}>
                        <p>id:{user.id}</p>
                        <p>name:{user.name}</p>
                        <p>age:{user.age}</p>
                    </li>
                ))}
            </ul>
        ))


    }

</script>

</html>